<template>
  <div>
    <div class="homeleft fl">
      <Nav></Nav>
    </div>
    <div class="homeright fl">
      <Header></Header>
      <div class="rightBody">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "home",
  computed: {
    ...mapState({
      // 当右侧为一个函数时，一旦使用这个计算属性，函数就会自动调用一次
      // 注入一个参数state，实为大仓库中的数据
      testInfo: (state) => {
        return state.home.testInfo;
      },
    }),
  },
};
</script>

<style>
/*首页左侧区域*/
.homeleft {
  background-color: #ffffff;
  height: 740px;
  width: 13%;
}

/*首页右侧区域*/
.homeright {
  /* background-color: #0072c6; */
  height: 740px;
  width: 87%;
}

/*右侧主体部分 */
.rightBody {
  height: 660px;
  margin: 10px;
  /* background-color: green; */
}
</style>
